<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.title{ width:100%; height:45px; line-height:45px; padding:0 20px; background:#fff; border-bottom:1px solid #dcdcdc;}
			.discover_item{ padding:15px; background:#fff;  border-bottom:1px solid #ccc; }
			.discover_item:last-child{ border-bottom:0;}
			.headimg{ height:50px; line-height: 50px; display: flex;}
			.headimg span{  height:50px; line-height:50px; display:inline-block; padding-left:10px;}
			 .headimg img{ width:50px; display:inline-block; height:50px; border-radius:50%; }
			 .books_name{ padding:10px 0; font-size:16px; font-weight:550;} 
			 .article{ overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 4; line-height:25px;
  -webkit-box-orient: vertical;  }
  			.articleImg img{  width:100%; height:100%; display: block;}
  			.discover_bottom span{ display:inline-block;  height:20px; line-height:20px;  vertical-align:top; }
  			.discover_bottom img{ width:20px;height:20px; line-height:20px;    display:inline-block; }
  			.bottom_right>div{ display:inline-block; vertical-align: middle;  margin-left:2%; height:20px;  line-height:20px;}
  			.bottom_right>div:first-child{ margin-left:0;}
  			.bottom_right{ text-align: right;}
  			.discover_bottom>div{ margin:15px 0 0; padding:0; display:inline-block; font-size:16px; width:49%; }
  			
  			.Audio{position: relative; width:100%;   margin: 0 auto; background:#EEEEEE; padding:5px 10px;}
  			.Audio_img{ width:20%; display:inline-block; vertical-align:middle; position:relative;}
  			.Audio_img img{  width:80%; height:80%;}
  			.articlevideo{ position:relative;}
  			.articlevideo video,.articlevideo .videosbtn{ width:95%; margin:0 auto;  display:block;}
  			.articlevideo .videosbtn{  height:100%; position:absolute; top:0;left:2.5%;}
  			.videosbtn .pay{ width:30px; height:30px; display:inline-block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
  			.videosbtn .pays{ width:15px; height:15px; display:inline-block;}
  			.time{width:78%; display:inline-block; vertical-align: bottom; position:relative; }
  			.pgs{ background:#fff; top:-20px;}
  			.pgs,.pgs span{ width:100%; display: inline-block; position:absolute;  height:5px;  }
  			.pgs span{z-index: 2; }
  		
			.pgs-play,.video-play{  position: absolute;  left: 0%;  width: 0; height:5px; background-color: #4785f9; z-index: 1; }
			.pgs-play:before,.video-play:before{content:''; width:10px; border-radius: 50%; height:10px; background:#4785f9; z-index:1; position: absolute; right:-1px; top:-2px; }
			.Audio_img .icon-btn{ position: absolute; top:50%; left:0%; padding:10px 0;  text-align: center; width:80%; transform: translateY(-50%); color:#fff;}			
 			.videobottom{ position:absolute; bottom:5px;left:5px; font-size:12px; width:calc(100% - 10px); padding:0 5px; color:#fff;}
 			.videobottom .pgs{ width:55%;   bottom:0px!important; top:4px; left:35px;  }
 			.videobottom .times{ vertical-align:middle; display:inline-block; width:30%; position:absolute; right:5px; text-align:right;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<h1 class="mui-title">渭书</h1>
		</header>
		<div class="mui-content">
			<div class="title">最新发现</div>	
			<div >
				<div class="discover_item">
					<div class="headimg"> <img src="../images/60x60.gif" alt="" /> <span>昵称</span></div>
					<div class="books_name">了不起的平凡</div>
					<div class="mui-row">
						<div class="mui-col-sm-8 article">隔着沧桑的轮回陪你对诗,不愿这是他们说的青海湖,心疼吧你只能暗访。隔着沧桑的轮回陪你对诗,不愿这是他们说的青海湖,心疼吧你只能暗访</div>
						<div class="mui-col-sm-4 articlevideo" >
								<video src="etj.mp4" controls autoplay loop></video>
								<!--<div class="videosbtn">
								
									<div class="videobottom">
										<img src="../images/pay.png" class="pays"  alt="" />
										<div class="pgs">
								    	  <div class="video-play progress" style="width:0%;"></div>
								    	  <span></span>
								    	</div>
										<div class="times"><span class="videoed-time">0:00</span> <span class="videoTime">0:00</span> </div>
									</div>
									
								</div>-->
						</div>
					</div>
					<div class="discover_bottom"> 
						<div class="">2018 08.08  10:00</div>
						<div class=" bottom_right"> 
							<div> <img src="../images/sc2.png" alt="" /> <span>30</span></div> 
							<div> <img src="../images/sc2.png" alt="" /> <span>20</span></div> 
							<div> <img src="../images/sc2.png" alt="" /> <span>50<span></div> 
						</div>
					</div>
				</div>
				<div class="discover_item">
					<div class="headimg"> <img src="../images/60x60.gif" alt="" /> <span>昵称</span></div>
					<div class="books_name">了不起的平凡</div>
					<div class="mui-row">
						<div class="mui-col-sm-12 article">隔着沧桑的轮回陪你对诗,不愿这是他们说的青海湖,心疼吧你只能暗访。隔着沧桑的轮回陪你对诗,不愿这是他们说的青海湖,心疼吧你只能暗访</div>
						
						<div class="mui-col-sm-12  Audio">
						    <audio id="audioTag" controls  >
						    	<source src="http://www.ytmp3.cn/down/46300.mp3"></source>
						    </audio>
						    <div class="Audio_img " id="playPause">
						    	<img src="../images/60x60.gif" alt="" />
						    	<div class="icon-btn">播放</div>
						    </div>
						    <div class="time">
						    	<div class="pgs">
						    	  <div class="pgs-play" id="progress" style="width:0%;"></div>
						    	  <span></span>
						    	</div>
						    	<div><span class="played-time">0.00</span>/<span class="audioTime">2.00</span></div>
						    </div>
						</div>
												
					</div>
					<div class="discover_bottom"> 
						<div class="">2018 08.08  10:00</div>
						<div class=" bottom_right"> 
							<div> <img src="../images/sc2.png" alt="" /> <span>30</span></div> 
							<div> <img src="../images/sc2.png" alt="" /> <span>20</span></div> 
							<div> <img src="../images/sc2.png" alt="" /> <span>50<span></div> 
						</div>
					</div>
				</div>
				<div class="discover_item">
					<div class="headimg"> <img src="../images/60x60.gif" alt="" /> <span>昵称</span></div>
					<div class="books_name">了不起的平凡</div>
					<div class="mui-row">
						<div class="mui-col-sm-12 article">隔着沧桑的轮回陪你对诗,不愿这是他们说的青海湖,心疼吧你只能暗访。隔着沧桑的轮回陪你对诗,不愿这是他们说的青海湖,心疼吧你只能暗访</div>
						
						<div class="mui-col-sm-12  Audio">
						    <audio id="audioTag" >
						    	<source src="http://www.ytmp3.cn/down/32341.mp3"></source>
						    </audio>
						    <div class="Audio_img " id="playPause">
						    	<img src="../images/60x60.gif" alt="" />
						    	<div class="icon-btn">播放</div>
						    </div>
						    <div class="time">
						    	
						    	<div class="pgs">
						    	  <div class="pgs-play" id="progress" style="width:0%;"></div>
						    	  <span></span>
						    	</div>
						    	<div><span class="played-time">0.00</span>/<span class="audioTime">2.00</span></div>
						    </div>
						</div>
												
					</div>
					<div class="discover_bottom"> 
						<div class="">2018 08.08  10:00</div>
						<div class=" bottom_right"> 
							<div> <img src="../images/sc2.png" alt="" /> <span>30</span></div> 
							<div> <img src="../images/sc2.png" alt="" /> <span>20</span></div> 
							<div> <img src="../images/sc2.png" alt="" /> <span>50<span></div> 
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script	src="../js/jquery.min.js"> </script>
		<script type="text/javascript">
			mui.init()
			
			
		$(function(){
			$(".discover_item audio").Audio({});
			$('.discover_item video').Video({});
		})
		
		
		
		
		;(function($){
			$.fn.Audio = function(options){
				var obj = {};
				var opt = $.extend({},obj,options);
				$(this).each(function(){
						
						var audiop = $(this).parents('.Audio');
						var audio = $(this)[0];
						//触发获取音频长度
						audio.onloadedmetadata = function(){
							audiop.find(".audioTime").text(transTime(this.duration))
						}

						
						function transTime(time){
							var duration = parseInt(time);
							var minute = parseInt(duration/60);
							var sec = duration%60+''
							var isM0 = ":";
							if(minute == 0){
								minute == '00';
							}else if(minute < 10){
								minute = '0'+minute;
							}
							if(sec.length == 1){
								sec = '0'+sec;
							}
							return minute + isM0 + sec;
						}
			
						
						function updateProgress(){
							var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100 ,0);
							audiop.find('.pgs-play').css('width',value * 1 + '%');
							audiop.find('.played-time').html(transTime(audio.currentTime));
							
						}
						
							
						
						function audioEnded(){
							audio.currentTime = 0;
							audio.pause();
							audiop.find(".icon-btn").text('播放');
						}
						
												
						$(this).next('#playPause').click(function(){
							audio.addEventListener('timeupdate',updateProgress,false);
						    audio.addEventListener('ended',audioEnded,false);
								
							//改变暂停/播放icon
							if(audio.paused){
									var audios =  $(this).parents('.discover_item').siblings('.discover_item');
									audios.find('audio')[0].pause();
									audios.find('.icon-btn').text('播放');
									audio.play();
									
								 audiop.find(".icon-btn").text('暂停');
								 audiop.find(".icon-btn").removeClass('icon-play').addClass('icon-pause');
							}else{
								audio.pause();
								 audiop.find(".icon-btn").text('播放');
								 audiop.find(".icon-btn").removeClass('icon-pause').addClass('icon-play');
							}
						});
						


						var pgsWidth = audiop.find('.pgs span').width() * 1 ; //0.907是 进度条这个div和整个进度条图片宽度的比例
					    //点击进度条跳到指定点播放
					    audiop.find('.pgs span').click(function (e) {
					        var rate = (e.offsetX - ($(this).width()-pgsWidth)/2)/pgsWidth;
					        audio.currentTime = audio.duration * rate;
					        updateProgress();
					    });
						
				})
			}
			
//			$.fn.Video = function(options){
//				var obj = {};
//				var opt = $.extend({},obj,options);
//				$(this).each(function(){
//					 var videop = $(this).parents('.articlevideo');
//					var video = $(this)[0];
//					//触发获取音频长度
//					video.onloadedmetadata = function(){
//						videop.find(".videoTime").text(transTime(this.duration));
//					}
//					
//					function transTime(time){
//						var duration = parseInt(time);
//						var minute = parseInt(duration/60);
//						var sec = duration%60+''
//						var isM0 = ":";
//						if(minute == 0){
//							minute == '00';
//						}else if(minute < 10){
//							minute = '0'+minute;
//						}
//						if(sec.length == 1){
//							sec = '0'+sec;
//						}
//						return minute + isM0 + sec;
//					}
//					function updateProgress(){
//							var value = Math.round((Math.floor(video.currentTime) / Math.floor(video.duration)) * 100 ,0);
//							videop.find('.video-play').css('width',value * 1 + '%');
//							videop.find('.videoed-time').html(transTime(video.currentTime));
//							
//					}
//						
//							
//						
//					function audioEnded(){
//						video.currentTime = 0;
//						video.pause();
//						videop.find(".pays").attr('src','../images/pay.png');
//					}
//												
//					$(this).next('.videosbtn').find('.pays').click(function(){
//						
//						video.addEventListener('timeupdate',updateProgress,false);
//					    video.addEventListener('ended',audioEnded,false);
////							
//						//改变暂停/播放icon
//						if(video.paused){
//								video.play();
//								$(this).attr('src','../images/paused.png');
//								var videos =  $(this).parents('.discover_item').siblings('.discover_item');
//								videos.find('video')[0].pause();
//								
////								 audiop.find(".icon-btn").text('暂停');
////							 	audiop.find(".icon-btn").removeClass('icon-play').addClass('icon-pause');
//						}else{
//							video.pause();
//							$(this).attr('src','../images/pay.png');
//						}
//					});
//					var pgsWidth = videop.find('.pgs span').width() * 1 ; //0.907是 进度条这个div和整个进度条图片宽度的比例
//					    //点击进度条跳到指定点播放
//				    videop.find('.pgs span').click(function (e) {
//				        var rate = (e.offsetX - ($(this).width()-pgsWidth)/2)/pgsWidth;
//				        video.currentTime = video.duration * rate;
//				        updateProgress();
//				    });
//					
//					
//					
//				})
//			}
		})(jQuery)
		
		</script>
	</body>

</html>